let lastBtn = document.getElementById('last-btn');
let playBtn = document.getElementById('play-btn');
let nextBtn = document.getElementById('next-btn');
let h5audio = document.getElementById('h5audio');
let playIcon = document.getElementById('play-icon');
let playerTrack = document.getElementById('player-track');
let albumArt = document.getElementById('album-art')
let albumArtCover = document.getElementById('album-art-cover');
let singTitle = document.getElementById('sing-title')
let singer = document.getElementById('singer')
let insTime = document.getElementById('ins-time');
let trackTime = document.getElementById('track-time');
let currentTimeText = document.getElementById('current-time');
let durationTimeText = document.getElementById('duration-time');
let bgImg = document.getElementById('bg-img');
let music_state = false; // true：正在播放  false： 未播放
const musics = [
    {
        id: 0,
        title: "渡凉关",
        cover: './images/dlg.jpg',
        url: './audios/dlg.mp4',
        singer: '叶里'
    },
    {
        id: 1,
        title: "一步一步",
        cover: './images/ybyb.jpg',
        url: './audios/ybyb.mp4',
        singer: '金歧玟'
    },
    {
        id: 2,
        title: "那少年",
        cover: './images/nsn.jpg',
        url: './audios/nsn.mp4',
        singer: '周锐'
    }
]
let currenIndex = 0;

// 点击播放按钮
playBtn.onclick = function () {
    if (music_state) {
        pause()
    } else {
        play()
    }
}
// 播放音乐
function play(){
    music_state = true
    h5audio.play()
    playIcon.setAttribute('class', 'iconfont icon-pause')
    playerTrack.setAttribute('class', 'player-track player-track-move-up')
    albumArt.setAttribute('class', 'album-art album-art-play')
}
// 暂停音乐
function pause(){
    music_state = false
    h5audio.pause()
    playIcon.setAttribute('class', 'iconfont icon-playbofang')
    playerTrack.setAttribute('class', 'player-track player-track-move-down')
    albumArt.setAttribute('class', 'album-art album-art-pause')
}
// 点击上一曲
lastBtn.onclick = function () {
    currenIndex--;
    currenIndex = currenIndex < 0 ? musics.length - 1 : currenIndex;
    changeSong(currenIndex)
}

// 点击下一曲
nextBtn.onclick = function () {
    currenIndex++;
    currenIndex = currenIndex > musics.length - 1 ? 0 : currenIndex;
    changeSong(currenIndex)
}
function changeSong(index){
    h5audio.src = musics[index].url;
    albumArtCover.src = musics[index].cover;
    singTitle.innerText = musics[index].title;
    singer.innerText = musics[index].singer
    bgImg.style.background = `url(${musics[index].cover}) no-repeat center`
    play()
}

// 更新时间和进度条
h5audio.ontimeupdate = function(event){
    let cur = this.currentTime;
    let dur = this.duration || 0;
    
    insTime.style.width = cur/dur * 200 + 'px';

    let cur_m = parseInt(cur / 60);
    if(cur_m <= 0){
        cur_m = '00'
    }else if(cur_m < 9){
        cur_m = '0' + cur_m
    }

    let cur_s = parseInt(cur % 60);
    if(cur_s <= 0){
        cur_s = '00'
    }else if(cur_s < 9){
        cur_s = '0' + cur_s
    }


    let dur_m = parseInt(dur / 60);
    if(dur_m <= 0){
        dur_m = '00'
    }else if( dur_m < 9){
        dur_m = '0' + dur_m
    }
    let dur_s = parseInt(dur % 60);
    if(dur_s <= 0){
        dur_s = '00'
    }else if(dur_s < 9){
        dur_s = '0' + dur_s
    }

    currentTimeText.innerText = cur_m + ':' + cur_s;
    durationTimeText.innerText = dur_m + ':' + dur_s;
}

// 拖动进度条
trackTime.onclick = function(event){
    let x = event.layerX;
    insTime.style.width = x + 'px';
    h5audio.currentTime = x / 200 * h5audio.duration;
}